<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <view v-if="show == 1">
            <view class="top" v-if="!type">
                <view class="top-header">
                    <view class="status">
                        <view>{{ data.ExpressData.StateDescription }}</view>
                    </view>
                    <view class="num">
                        <view>{{ data.ExpressName }}包裹：{{ data.ExpressNumber }} </view>
                        <!-- <view>共7件商品</view> -->
                    </view>
                </view>

                <view class="order-item-main" @click="showDetail(data.SkuList)">
                    <view class="order-item-imgs">
                        <view
                            class="img-item"
                            v-for="(imgitem, indeximg) in data.SkuList"
                            :key="indeximg"
                            v-if="indeximg < 3">
                            <image mode="aspectFill" :src="easyGetImgUrl(imgitem.V_ProductImg)" class="order-item-img">
                            </image>
                            <view class="order-item-name" v-if="data.SkuList.length == 1"
                                >{{ imgitem.V_ProductName }}
                            </view>
                        </view>
                        <uni-icons type="more" v-if="data.SkuList.length > 3"></uni-icons>
                    </view>
                    <view class="right-box">
                        <view class="num-box">
                            <text class="order-desc">共{{ data.SkuList.length }}种</text>
                        </view>
                        <uni-icons type="arrowright" size="20" customIcons="icon-black"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="mt-sm bg-white log-info-main">
                <view class="pd-sm">
                    <iconsfont class="icon" size="26" :color="'#999999'" :customIcons="'icon-shouhuodizhi'"></iconsfont>
                    <text class="address-text">[收货地址] {{ data.Address }}</text>
                </view>
                <view class="wuliu-list ptb-sm" v-if="data.ExpressData.Detail.length > 0">
                    <view
                        class="wuliu-list-item"
                        :class="{ 'current-step': index == 0 }"
                        v-for="(item, index) in data.ExpressData.Detail"
                        :key="index">
                        <view class="wuliu-list-item-main">
                            <view class="wuliu-info">{{ item.NodeInfo }}</view>
                            <view class="wuliu-time">{{ item.NodeTime }}</view>
                        </view>
                        <view class="wuliu-line">
                            <view class="wuliu-line-dot"></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="mescroll-empty" v-if="show == 0">
            <image src="/static/img/empty.png"></image>
            <view>~ 暂无数据 ~</view>
        </view>
        <uni-popup ref="policyPop" type="bottom" :safe-area="false">
            <view class="pop-pro-list">
                <view class="pop-header">
                    <text class="text">商品清单</text>
                    <uni-icons class="icon-close" size="40" type="close" @click="$refs.policyPop.close()"> </uni-icons>
                </view>
                <scroll-view scroll-y class="scroll">
                    <inventory-item :data="Detaildata"></inventory-item>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { sortBykey } from "@/uni-sub-base/utils/utils.js"
import { getOrderDetail, AddOrEditOrderRemark } from "@/service/api/order.js"
import inventoryItem from "@/components/order/inventory-item.vue"
export default {
    components: {
        inventoryItem,
    },
    data() {
        return {
            config: {
                title: "物流信息",
                centerSlot: true,
            },
            orderId: 0,
            isLoading: false,
            show: 2,
            data: {},
            loglist: [],
            Detaildata: [],
            type: null,
        }
    },
    onLoad(e) {
        if (e.data) {
            this.data = JSON.parse(decodeURIComponent(e.data))
        }
        if (e.type) {
            this.type = e.type
        }
        if (this.data.ExpressData && this.data.ExpressData.Detail.length > 0) {
            this.show = 1
        } else {
            this.show = 0
        }
    },
    mounted() {},
    methods: {
        showDetail(item) {
            this.$refs.policyPop.open()
            this.Detaildata = item
        },
    },
}
</script>

<style lang="scss">
page {
    background: #f1f1f1;
}

.noLog {
    padding: $app-page-padding;
    text-align: center;
    color: $color-gray-2;
}

.container {
    // padding: $app-page-padding;
}

.top {
    background: #ffffff;
    margin: $app-page-padding $app-page-padding 0;
    border-radius: 16rpx;
    .top-header {
        background: #f9fbfc;
        padding: $app-page-padding;
        border-radius: 16rpx 16rpx 0 0;
    }
}

.status {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: $font-size-32;
    color: $color-gray-1;
}

.num {
    padding-top: 10rpx;
    display: flex;
    flex-direction: column;
    font-size: $font-size-28;
    color: $color-gray-1;
}

.product {
    background: #ffffff;
    padding: $app-page-padding;
    display: flex;
    justify-content: flex-start;

    image {
        width: 120rpx;
        height: 120rpx;
        margin-right: 24rpx;
    }

    .product_main {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .title {
        font-size: 28rpx;
    }

    .specification,
    .member {
        font-size: 24rpx;
        color: $color-gray-3;
    }

    .member {
        text-align: right;
    }
}

.bg-white {
    background-color: #fff;
    margin: 0 24rpx 24rpx 24rpx;
    border-radius: 16rpx;
}

.pd-sm {
    padding: $app-page-padding;
    .icon {
        margin-left: -6rpx;
    }
    .address-text {
        font-size: 28rpx;
        margin-left: 8rpx;
    }
}

.ptb-sm {
    padding-top: 20rpx !important;
    padding-bottom: 20rpx !important;
}

.plr {
    padding-left: 30rpx !important;
    padding-right: 30rpx !important;
}

// .wuliu-list>view {
// 	font-size: 28rpx;
// 	position: relative;
// 	padding-left: 30rpx;
// 	color: #666;
// 	// border-left: 1rpx solid #e5e5e5;
// 	padding-bottom: 40rpx;
// 	line-height: 38rpx;
// }

.wuliu-list-item {
    position: relative;
    padding-left: 30rpx;
    padding-right: 30rpx;
    .wuliu-list-item-main {
        padding-bottom: 40rpx;
    }
    .wuliu-line {
        position: absolute;
        let: -8rpx;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e7e7e7;
        .wuliu-line-dot {
            width: 12rpx;
            height: 12rpx;
            position: absolute;
            top: 14rpx;
            left: -4rpx;
            border-radius: 40rpx;
            background: #ccc;
        }
    }
}
.wuliu-list-item:first-child {
    .wuliu-line {
        position: absolute;
        top: 16rpx;
        .wuliu-line-dot {
            top: 0;
            background: #fe6f32;
        }
    }
}
.wuliu-list-item:last-child {
    .wuliu-line {
        position: absolute;
        height: 20rpx;
    }
}
.wuliu-info {
    text-align: justify;
    margin-bottom: 14rpx;
    color: $app-color-text-main;
    font-size: 28rpx;
    padding-left: 30rpx;
    line-height: 42rpx;
}
.wuliu-time {
    color: $app-color-text-tip;
    font-size: 26rpx;
    padding-left: 30rpx;
}

// .wuliu-list>view:after {
// 	position: absolute;
// 	top: -4rpx;
// 	left: -8rpx;
// 	z-index: 2;
// 	width: 16rpx;
// 	height: 16rpx;
// 	background: #e5e5e5;
// 	content: "";
// 	border-radius: 50%;
// }
// .wuliu-list>view.current-step:after {

// 	background:#FE6F32;
// }

// .wuliu-list>view view:last-child {
// 	color: #999;
// 	padding-top: 10rpx;
// }

.order-item-main {
    display: flex;
    flex: 1;
    flex-direction: row;
    padding: $app-page-padding;
}

.order-item-imgs {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    .img-item {
        position: relative;
        margin-right: 24rpx;
        display: flex;
        align-items: center;

        .order-item-name {
            flex: 1;
            font-size: 28rpx;
            color: $color-gray-1;
            display: flex;
            align-items: center;
            padding-left: 14rpx;
        }

        .order-item-img {
            display: flex;
            width: 120rpx;
            height: 120rpx;
            // border: 1px solid $app-color-main;
            border-radius: 8rpx;
        }

        .text-num {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40rpx;
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            color: $color-white;
            background: rgba($color-black, 0.3);
            font-size: $font-size-24;
        }
    }
}

.right-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    .num-box {
        display: flex;
        flex-direction: column;
        margin-right: 16rpx;

        text {
            margin-bottom: 4rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.mescroll-empty {
    box-sizing: border-box;
    width: 100%;
    padding: 50px 25px;
    text-align: center;

    image {
        width: 140px !important;
        height: 98px !important;
    }

    view {
        margin-top: 10px;
        font-size: 12px;
        color: gray;
    }
}
.pop-pro-list {
    background: #f1f1f1;
    border-radius: 24rpx 24rpx 0 0;
    height: 70vh;
    .pop-header {
        display: flex;
        flex-direction: row;
        height: 88rpx;
        align-items: center;
        justify-content: center;
        border-radius: 24rpx 24rpx 0 0;
        background: #ffffff;

        .icon-close {
            position: absolute;
            right: 24rpx;
            color: $color-gray-3;
        }

        .text {
            font-size: $font-size-28;
            font-weight: 700;
        }
    }

    .scroll {
        height: 100%;
        background: #f1f1f1;
    }
}
.log-info-main {
    margin-top: $app-page-padding;
}
</style>
